.red {
  background-color: color-mix(in srgb, red 50%, transparent 50%);
}

.blue {
  background-color: color-mix(in srgb, blue 50%, transparent 50%);
}

.green {
  background-color: color-mix(in srgb, green 50%, transparent 50%);
}

.yellow {
  background-color: color-mix(in srgb, yellow 50%, transparent 50%);
}

.purple {
  background-color: color-mix(in srgb, purple 50%, transparent 50%);
}

.orange {
  background-color: color-mix(in srgb, orange 50%, transparent 50%);
}

.pink {
  background-color: color-mix(in srgb, pink 50%, transparent 50%);
}

.brown {
  background-color: color-mix(in srgb, brown 50%, transparent 50%);
}

.fuchsia {
  background-color: color-mix(in srgb, fuchsia 50%, transparent 50%);
}

.pink {
  background-color: color-mix(in srgb, pink 50%, transparent 50%);
}

.hotpink {
  background-color: color-mix(in srgb, hotpink 50%, transparent 50%);
}

.cyan {
  background-color: color-mix(in srgb, cyan 50%, transparent 50%);
}
